<template>
  <a-spin :spinning="Loading">
    <div style="display: grid; place-items: center; height: 98vh;">
      <div style="display: flex; flex-wrap: nowrap">
        <div style="padding-right: 10px">
          <a-card hoverable style="width: 300px">
            <template #cover>
              <img alt="example" :src="card.cover" />
            </template>
            <template #actions>
              <a-tooltip placement="bottom">
                <template #title>下载歌词</template>
                <FileTextOutlined @click="Download('lrc')" />
              </a-tooltip>
              <a-tooltip placement="bottom">
                <template #title>下载歌曲</template>
                <DownloadOutlined @click="Download('mp3')" />
              </a-tooltip>
            </template>
            <a-card-meta :title="card.artist" :description="card.name">
              <template #avatar>
                <a-avatar :src="card.cover" />
              </template>
            </a-card-meta>
          </a-card>
        </div>

        <div style="width: 680px">
          <div id="aplayer"></div>
          <a-collapse v-model:activeKey="activeKey">
            <a-collapse-panel
              key="1"
              header="歌词"
              :style="customStyle"
              collapsible="disabled"
            >
              <a-textarea
                v-model:value="formState.lrc"
                :bordered="false"
                placeholder="Borderless"
                :rows="11"
              />
            </a-collapse-panel>
          </a-collapse>
        </div>
      </div>
      <Footer></Footer>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
import { DownloadOutlined, FileTextOutlined } from "@ant-design/icons-vue";
import myAxios from "@/plugins/myAxios";
import router from "@/router";
import { useRoute } from "vue-router";
import { onBeforeMount, reactive, ref } from "vue";
import "aplayer/dist/APlayer.min.css";
import APlayer from "aplayer";
import { message } from "ant-design-vue";
import Footer from "@/components/Index/Footer.vue";
const route = useRoute();

function convert(str: string): string {
  console.log(str);
  return str
    .replace(/\\u[0-9a-fA-F]{4}/g, (code) => {
      if (code === "\\u000a") {
        return "\n";
      }
      return String.fromCharCode(parseInt(code.slice(2), 16));
    })
    .replace(/\\n/g, "\n")
    .replace("'", "")
    .replace(/\\/g, "");
}

const activeKey = ref(["1"]);
const customStyle =
  "background: #FFFFFF;border-radius: 4px;border: 0;overflow: hidden";

interface FormState {
  name: string;
  url: string;
  cover: string;
  lrc: string;
}

let formState = reactive<FormState>({
  name: "",
  cover: "",
  url: "",
  lrc: "",
});

const getPostById = async () => {
  const id = route.params.category;
  // message.info(id)
  await myAxios.get(`music/get/vo?id=${id}`).then((res: any) => {
    if (res !== null) {
      formState = res;
      formState.lrc = convert(res.lrc);
      // formState.lrc = convert(res.lrc);
      document.title = formState.name;
      console.log(formState);
      addMyAudio();
      setCardMsg(res);
    } else {
      formState = res;
      router.push("/404");
    }
    // message.info("请求完成")
    setTimeout(() => {
      Loading.value = false;
    }, 800);
  });
};
const addMyAudio = () => {
  const ap = new APlayer({
    container: document.getElementById("aplayer"),
    lrcType: 1,
    audio: {
      name: formState.name.split("-")[0],
      artist: formState.name.split("-")[1],
      url: formState.url,
      cover: formState.cover,
      lrc: formState.lrc,
    },
  });
};

// 设置卡片信息
const card = ref({
  name: "Kba_Music",
  artist: "Kba的音乐平台",
  cover:
    "https://p3.music.126.net/vmCcDvD1H04e9gm97xsCqg==/109951163350929740.jpg?param=600x600",
});
const setCardMsg = (res: any) => {
  card.value.name = res.name.split("-")[0];
  card.value.artist = res.name.split("-")[1];
  card.value.cover = res.cover;
};
const DOWNLOAD_URL = ref("https://www.gequbao.com/download/Irc/");


const Download = (type:string) => {
  if (type === 'lrc') {
    const blob = new Blob([formState.lrc], {type: 'text/plain'})
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = formState.name+ '.lrc'
    a.click()
    URL.revokeObjectURL(url)
  } else if (type === 'mp3') {
    let url = formState.url;
    if(url.length <= 10){
      message.info("当前歌曲解析出错，暂不能下载")
    } else {
      // if(formState.url.indexOf(".mp3") === -1) url= url+"mp3"
      window.open(url)
    }

  }
}
onBeforeMount(() => {
  // getLoginUser();
  getPostById();
});

const Loading = ref<boolean>(true);
</script>
<style scoped></style>
